<template>
  <div class="address">
    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar
        style="background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);"
        title="常用地址"
        left-text="返回"
        fixed
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- 占位 -->
      <div style="height: 40px"></div>
    </div>
    <!-- 地址列表 -->
    <van-cell
      v-for="address in addressData"
      :key="address.id"
      :title="address.username + ' ' + address.telephone"
      :label="address.province + address.city + address.area + address.address"
    >
      <van-icon
        name="edit"
        size="22"
        color="#1989fa"
        style="margin-top: 20px"
        @click="editAddress(address)"
      />
      <van-icon
        name="delete-o"
        size="22"
        color="#1989fa"
        style="margin-top: 20px;margin-left:10px;"
        @click="deleteAddress(address.id)"
      />
    </van-cell>
    <div style="height: 120px"></div>
    <!-- 新增按钮 -->
    <div class="btn">
      <van-button round block class="addBtn" @click="addBtn"
        >新增地址</van-button
      >
    </div>

    <!-- 地址面板 -->
    <van-action-sheet v-model="show" :title="addressTitle">
      <div class="content">
        <van-form :model="addressForm" ref="form">
          <van-field
            label="姓名"
            placeholder="请输入收货人姓名"
            v-model="addressForm.username"
            :rules="[{ required: true, message: '请输入收货人姓名' }]"
          />
          <van-field
            label="电话"
            placeholder="请输入收货人号码"
            v-model="addressForm.telephone"
            :rules="[{ required: true, message: '请输入正确手机号码' }]"
          />
          <van-field
            label="地区选择"
            readonly
            clickable
            @click="addressShow = true"
            :value="this.addressStr"
            placeholder="请选择地区"
            :rules="[{ required: true, message: '请输入地址' }]"
          />
          <van-field
            label="详细地址"
            placeholder="请输入详细地址"
            v-model="addressForm.address"
            :rules="[{ required: true, message: '请输入详细地址' }]"
          />
          <div style="margin: 16px">
            <van-button round block @click="submitAddress" class="addBtn"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-action-sheet>

    <!-- 地址选择面板 -->
    <van-popup
      v-model="addressShow"
      round
      position="bottom"
      :style="{ height: '45%' }"
    >
      <van-area
        :area-list="areaList"
        ref="myArea"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { areaList } from "@vant/area-data";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // 地址数组
      addressData: [],
      // 是否显示地址面板
      show: false,
      // 地址面板标题
      addressTitle: "新增地址",
      // 地区数据
      areaList,
      // 地址选择弹出层
      addressShow: false,
      // 地址字符串
      addressStr: "",
      // 表单对象
      addressForm: {
        // 省
        province: "",
        // 市
        city: "",
        // 区
        area: "",
        // 具体地址
        address: "",
        // 收货人姓名
        username: "",
        // 收货人电话
        telephone: "",
        // 地址id
        id: "",
        userId: "",
      },
    };
  },
  computed: {
    // 引入用户信息对象
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入用户数据
    ...mapActions("user", ["getUserInfo"]),
    // 查询用户信息
    queryUser() {
      // this.addressForm.userId=this.userInfo.id
      this.getUserInfo();
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取地址列表
    async getAllAddress() {
      let data = {
        page: 1,
        pageSize: 100,
        userId: this.userInfo.id,
      };
      let res = await get("/address/pageQuery", data);
      this.addressData = res.data.data.list;
      // console.log(res.data.data.list);
    },
    // 新增按钮
    addBtn() {
      this.show = true;
      // 清空表单对象
      this.addressForm = {};
      this.addressStr = "";
      this.addressTitle = "新增地址";
      // this.addressForm.userId=this.userInfo.id
    },
    // 删除地址
    deleteAddress(id){
      this.$dialog
        .confirm({
          message: "您确定要删除该常用地址吗？",
        })
        .then(async() => {
          let res = await get("/address/deleteById", { id });
          this.getAllAddress();
        })
        .catch(() => {});
    },
    //确定选择城市
    onConfirm(val) {
      this.addressStr = val
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("-");
      this.addressForm.province = val[0].name;
      this.addressForm.city = val[1].name;
      this.addressForm.area = val[2].name;
      this.addressShow = false; //关闭弹框
    },
    //取消选中城市
    onCancel() {
      this.addressShow = false;
      this.$refs.myArea.reset(); // 重置城市列表
    },
    // 修改地址
    editAddress(address) {
      this.addressTitle = "修改地址";
      this.show = true;
      this.addressForm.id = address.id;
      this.addressForm.username = address.username;
      this.addressForm.telephone = address.telephone;
      this.addressForm.address = address.address;
      this.addressForm.province = address.province;
      this.addressForm.city = address.city;
      this.addressForm.area = address.area;
      this.addressStr =
        address.province + "-" + address.city + "-" + address.area;
    },
    // 提交地址
    submitAddress() {
      this.addressForm.userId = this.userInfo.id;
      this.$refs.form
        .validate()
        .then(async () => {
          let res = await post("/address/saveOrUpdate", this.addressForm);
          this.getAllAddress();
          this.show = false;
          this.$toast.success("提交成功");
        })
        .catch(() => {
          this.$toast.fail("提交失败");
        });
    },
  },
  created() {
    this.getAllAddress();
    this.queryUser();
  },
};
</script>

<style scoped>
.van-cell__title {
  flex: 5;
}
.van-cell__title span {
  font-size: 16px;
}
.van-cell__label {
  font-size: 14px;
}
.van-cell {
  box-shadow: 2px 2px 2px rgb(247 248 249 / 80%);
  background-color: #fff;
  width: 98%;
  border-radius: 5px;
  margin: 5px auto;
  padding: 10px;
}
.btn{
  width: 53%;
  height: 40px;
  text-align: center;
  border-radius: 22px;
  line-height: 40px;
  margin: 2em auto 0px;
}
.addBtn {
  background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%);
  color: rgb(255, 255, 255);
  font-size: 16px;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar__text {
  color: #fff;
}
/deep/ .van-icon-arrow-left {
  color: #fff;
}
</style>